<template>
	<div style="background-color: rgba(169,169,169,0.39)">
		<br>
		<div style="display: flex;align-items: center;flex-direction: column">
			<div style="background-color: white;margin-bottom:10px;border-radius: 2px;width: 90% " v-for="data in data"
				class="row">
				<span style="margin-right: 60px"> id:{{ data.id }}</span>
				<span style="margin-right: 60px">发言人：{{ data.data.from }}</span>
				<span :style="{color:data.data.color1}" style="margin-right: 60px"> 内容：{{ data.data.content }}</span>
				<el-button @click="del(data.id)" type="danger">删除 </el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from "axios";
	export default {
		name: "admin",
		data() {
			return {
				data: []
			}
		},
		methods: {
			del(id) {
				axios.get("http://192.168.31.89:9090/data/del?id=" + id).then(res => {
					if (res.data == "ok") {
						axios.get("http://192.168.31.89:9090/data/get").then(res => {
							let data = res.data
							let d = []
							for (let i = 0; i < data.length; i++) {
								d.push({
									id: data[i].id,
									data: JSON.parse(data[i].data)
								})
							}
							this.data = d
						})
					}
				})
			}
		},
		mounted() {
			if (localStorage.getItem("name") != "admin") {
				this.$router.push({
					name: 'login'
				})
			} else {
				axios.get("http://localhost:9090/data/get").then(res => {
					let data = res.data
					for (let i = 0; i < data.length; i++) {
						this.data.push({
							id: data[i].id,
							data: JSON.parse(data[i].data)
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.row {
		display: flex;
		flex-direction: row;
		align-items: center;

	}
</style>